<template>
  <div>
    <BaseForm
      ref="searchForm"
      type="search"
      :items="formItems"
      v-model:form="searchParams"
      @search="handleSearch"
    >
      <template #suffix-button>
        <el-button type="primary" @click="handleEdit({})">
          <el-icon><Plus /></el-icon>
          添加
        </el-button>
      </template>
    </BaseForm>

    <BaseTable
      ref="baseTable"
      :getTableDataFn="contentManagementService.publishMessagePageList"
      :searchParams="searchParams"
    >
      <el-table-column
        prop="publishMessageId"
        label="信息发布任务ID"
        width="135"
      />
      <el-table-column prop="title" label="标题" minWidth="120" />
      <el-table-column prop="materialNum" label="素材数量" minWidth="120" />
      <el-table-column prop="publishToName" label="发送对象" minWidth="120" />
     <!--  <el-table-column prop="wxGroupNum" label="发送群聊数量" minWidth="100">
      </el-table-column> -->
      <el-table-column prop="publishTime" label="发布时间" minWidth="170" />
      <el-table-column prop="createUserName" label="创建人" />
      <el-table-column prop="createTime" label="创建时间" minWidth="170" />
      <el-table-column
        prop="createTime"
        label="待审核/审核通过/审核不通过数量"
        minWidth="170"
      >
        <template #default="scope">
          <span style="color: #02a7f0">{{ scope.row.auditNum || 0 }}</span
          >/<span style="color: rgba(112, 182, 3, 0.996078431372549)">{{
            scope.row.auditPassNum || 0
          }}</span
          >/<span style="color: rgba(217, 0, 27, 0.996078431372549)">{{
            scope.row.auditNoPassNum || 0
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="待执行/已执行/已取消数量"
        minWidth="170"
      >
        <template #default="scope">
          <span style="color: #02a7f0">{{
            scope.row.toBeExecutedNum || 0
          }}</span
          >/<span style="color: rgba(112, 182, 3, 0.996078431372549)">{{
            scope.row.executedNum || 0
          }}</span
          >/<span>{{ scope.row.executeCanalNum || 0 }}</span>
        </template></el-table-column
      >
      <el-table-column
        prop="createTime"
        label="已发送/未发送数量"
        minWidth="170"
      >
        <template #default="scope">
          <span style="color: #02a7f0">{{ scope.row.sentNum || 0 }}</span
          >/<span>{{ scope.row.unSentNum || 0 }}</span>
        </template></el-table-column
      >
      <el-table-column label="操作" fixed="right" width="100">
        <template #default="scope">
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleEdit(scope.row)"
            >查看详情</el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
    <EditForm
      v-if="visibleEditForm"
      v-model:dialogVisible="visibleEditForm"
      :item="item"
      :handleSearch="handleSearch"
    ></EditForm>
  </div>
</template>

<script setup lang="ts">
import EditForm from './EditForm.vue'
import { contentManagementService } from '@/api/contentManagement'
import { userService } from '@/api/user'
// import { basicConfigService } from '@/api/basicConfig'

const userOptions = ref([])
const formItems = ref([
  {
    name: '标题',
    key: 'title',
    type: 'input',
  },
  {
    name: '创建人',
    key: 'createUserId',
    type: 'select',
    options: userOptions,
  },
  { name: '创建时间', key: 'date', clearable: true, type: 'datetimerange' },
  { name: '发布时间', key: 'date1', clearable: true, type: 'datetimerange' },
])
const searchParams = ref({
  date: '',
  date1: '',
  createTimeStart: undefined,
  createTimeEnd: undefined,
  publishTimeStart: undefined,
  publishTimeEnd: undefined,
})

const baseTable = ref(null)
const handleSearch = () => {
  const date = searchParams.value.date
  const date1 = searchParams.value.date1
  searchParams.value.createTimeStart = date[0] || undefined
  searchParams.value.createTimeEnd = date[1] || undefined
  searchParams.value.publishTimeStart = date1[0] || undefined
  searchParams.value.publishTimeEnd = date1[1] || undefined
  baseTable.value.handleSearch({
    ...searchParams.value,
    date: undefined,
    date1: undefined,
  })
}
const item = ref({})
const visibleEditForm = ref(false)
const router = useRouter()
const handleEdit = (row) => {
  console.log(row)

  if (JSON.stringify(row) === '{}') {
    item.value = { ...row }
    visibleEditForm.value = true
  } else {
    router.push({
      path: `/contentManagement/infoPublishManagement/infoSettingDetail`,
      query: {
        id: row.publishMessageId,
      },
    })
  }
}
onMounted(() => {
  // getAllCommunity()
  userService.getList({ data: {} }).then((res) => {
    userOptions.value = res.data.map((e) => {
      return {
        label: e.userName,
        value: e.userId,
      }
    })
  })
})
</script>

<style lang="less" scoped></style>
